<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/warpper.css">
    <link rel="stylesheet" href="./css/header_footer.css">
    <link rel="stylesheet" href="./css/product details.css">
    <link rel="stylesheet" href="./lib/放大镜插件/css/magnifier.css">
    <script src="./lib/jquery.js"></script>
    <script src="./lib/放大镜插件/js/magnifier.js"></script>
    <script src="./js/product details.js"></script>
</head>
<body>
    <!-- 顶部区域开始 -->
    <div class="top1">
        <div class="warpper clearfix">
            <p class="fl">legochina.cn</p>
            <span class="fr">
                欢迎光临
                <a href="#">乐购</a>,
                请 登陆\
                <a href="#">注册</a>
            </span>
        </div>
    </div>
    <!-- 顶部区域结束 -->

    <!-- 头部区域开始 -->
    <div class="header warpper clearfix">
        <div class="fl">
            <img src="./imgs/logo.jpg" alt="">
        </div>
        <div class="fr">
            <form action="#" class="search clearfix">
                    <input type="text" placeholder="拖鞋啊" >
                    <input type="button" class="input2">
                <a href="" class="_a1 fl">
                    <span></span>
                    购物车&nbsp;3
                </a>
                <a href="" class="_a2 fl">我的订单</a>
            </form>
            
        </div>
        <ul class="fr clearfix">
            <li>图书</li>
            <li>电子书</li>
            <li>原创文学</li>
            <li>服装</li>
            <li>运动户外</li>
            <li>孕婴童</li>
            <li>家居</li>
            <li>创意文具</li>
            <li>地方特产</li>
            <li>海外购</li>
            <li>电器城</li>
        </ul>
    </div>
    <!-- 头部区域结束 -->
    
    <!-- 展示区域开始 -->
    <div class="b">
        <div class="details-show warpper">
            <h3 class="fwn">
                <span>图片</span>
                <p class="fs16">
                    > 小说 > 情感/家庭/婚姻 >  博集天卷 > 她和他
                </p>
            </h3>
            <!-- 展示区域的内容区域 -->
            <div class="details-content clearfix">
                <!-- 左边 -->
                <div class="magnifier fl" id="magnifier1">
                    <div class="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="./imgs/书籍/22870923-1_l_1.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./imgs/书籍/22876893-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./imgs/书籍/22935553-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./imgs/书籍/23353342-1_l.jpg" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="./imgs/书籍/22854283-1_l.jpg" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                    <p class="fs16">商品编号：11950959</p>
                </div>
                <!-- 右边 -->
                <div class="details-content-right fr">
                    <div class="details-content-right-top">
                        <div class="box1">
                            <h5 class="fs22 fwn">她和他</h5>
                            <p class="f60_c fs18">
                                《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册
                            </p>
                            <p class="fs16 c80">
                                [法] 马克·李维 著；杨亦雨 译
                            </p>
                        </div>
                        <div class="box2">
                            <div class="cx clearfix fs16">
                                <p class="fl">
                                    乐 购 价：
                                    <span class="f60_c fs22">
                                        ￥26.20
                                    </span>
                                     [6.9折] [定价：￥38.00] (降价通知)
                                </p>
                                <p class="fr">
                                    累计评价
                                    <span class="f60_c">99999</span>
                                </p>
                            </div>
                            <p class="fs16 c6c">
                                促销信息：
                                <span class="f60_c">满减 每满150.00元，可减50.00元现金   </span>
                                详情 >>
                            </p>
                            <div class="lj">
                                <p class="fs16 c80">领 券：
                                    <span>100-6</span>
                                    <span>100-6</span>
                                </p>
                                
                            </div>
                        </div>
                        <div class="box3 fs16">
                            <p>
                                种类选择:
                                <span class="zm">平装版</span>
                                <span class="zm active">精装版</span>
                            </p>
                        </div>
                    </div>
                    <div class="details-content-right-bom">
                        <div class="clearfix">
                            <div class="shuliang fl clearfix fs16">
                                <p>1</p>
                                <span>+</span>
                                <span>-</span>
                            </div>
                            <div class="jiesuan fl f60_b">
                                加入购物车
                            </div>
                        </div>
                        <p class="fs16">温馨提示：支持7天无理由退货</p>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <!-- 展示区域结束 -->

    <!-- 人气单品 -->
    <div class="guess warpper">
        <div class="guess-top">
            <h3>
                <span class="f60_b fwn">猜你喜欢</span>
            </h3>
            <ul class="clearfix">
                <script>
                    for(let i=0;i<5;i++){
                        document.write(`
                            <li>
                                <div>
                                    <img src="./imgs/书籍/22935553-1_l.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./imgs/eightzhe.png" alt="">
                                </div>
                                <p>白夜行 &emsp;东野上吾</p>
                                <p>
                                    推荐:
                                    <img src="./imgs/XX.png" alt="">
                                </p>
                                <span>￥:38</span>
                                <span>￥:58</span>
                            </li>
                        `)
                    }
                </script>
            </ul>
        </div>
        <div class="guess-bom clearfix">
            <div class="guess-bom-left fl">
                <p class="fs22">看了又看</p>
                <ul class="clearfix">
                    <script>
                        for(let i=0;i<5;i++){
                            document.write(`
                                <li>
                                    <div>
                                        <img src="./imgs/书籍/22935553-1_l.jpg" alt="">
                                    </div>
                                    <div>
                                        <img src="./imgs/eightzhe.png" alt="">
                                    </div>
                                    <p>白夜行 &emsp;东野上吾</p>
                                    <p>
                                        推荐:
                                        <img src="./imgs/XX.png" alt="">
                                    </p>
                                    <span>￥:38</span>
                                    <span>￥:58</span>
                                </li>
                            `)
                        }
                    </script>
                </ul>
            </div>
            <div class="guess-bom-right fr">
                <h3 class="clearfix">
                    <span class="spjs active fl">商品介绍</span>
                    <span class="spjs fl">评价（9999）</span>
                </h3>
                <div class="guess_img box99 cpt">
                    <img src="./imgs/03-产品详情-B.jpg" alt="">
                </div>
                <div class="guess_pl box99 ">
                    <div class="guess_pl_1">
                        <img src="./imgs/评价1.png" alt="">
                    </div>
                    <div class="guess_pl_2">
                        <img src="./imgs/评论2.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 人气单品结束 -->
    
    <!-- 页脚区域开始 -->
    <div class="footer">
        <div class="footer_top">
            <ul class="warpper clearfix">
                <li>
                    <img src="./imgs/222_11.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_13.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_15.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_17.png" alt="">
                </li>
            </ul>
        </div>
        <div class="footer_mid warpper clearfix">
            <ul class="ul1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>发票制度</li>
                <li>账户管理</li>
                <li>会员优惠</li>
            </ul>
            <ul>
                <li>支付方式</li>
                <li>货到付款</li>
                <li>网上支付</li>
                <li>礼品卡支付</li>
                <li>银行转帐</li>
            </ul>
            <ul>
                <li>订单服务</li>
                <li>订单配送查询</li>
                <li>订单状态说明</li>
                <li>自助取消订单</li>
                <li>自助修改订单</li>
            </ul>
            <ul>
                <li>退换货</li>
                <li>退换货政策</li>
                <li>自助申请退换货</li>
                <li>退换货进度查询</li>
                <li>退款方式和时间</li>
            </ul>
            <ul>
                <li>商家服务</li>
                <li>商家中心</li>
                <li>运营服务</li>
                <li>加入尾品汇</li>
            </ul>
            <img src="./imgs/logo_00.png" alt="">
        </div>
        <div class="footer_bom warpper">
            <p>
                公司简介 &emsp; | &emsp; Investor Relations  &emsp;| &emsp; 网站联盟  &emsp;|&emsp;  乐购招商  &emsp;|&emsp;  机构销售  &emsp;|&emsp;  手机乐购  &emsp;|&emsp;  官方Blog   &emsp;|&emsp;  热词搜索
            </p>
            <p>
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </p>
        </div>
    </div>
    <!-- 页脚区域结束 -->

    
</body>
</html>